<!DOCTYPE html>
<html data-dpr="1" style="font-size: 20px;">
<head lang="en">
    <meta charset="UTF-8">
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0, user-scalable=no">
    <!-- iOS 设备适配代码Star-->
    <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-title" content="UU商城">
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 设置苹果工具栏颜色 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <meta name="format-detection" content="telephone=no"><!--电话数字样式去掉 苹果-->
    <link rel="stylesheet" href="css/activity.css">
    <script src="zepto.min.js"></script>
<title>UU快购签到页</title>
</head>
<body>
<div class="acti_sign">
    <header class="banner">
        <img src="img/bannersign.jpg" alt=""/>
    </header>
    <div class="wrap">
        <section class="signwall2">
            <div class="form-item form-item-switch border-b">
                <span>签到提醒</span>
                <label class="form-switch"><input type="checkbox"/></label>
            </div>
            <!-- 开关结束-->
<div class="signUser clearfix">
    <div class="userImg">
        <div class="userImgin">
            <img src="img/qiandao.jpg" alt=""/>
        </div>

    </div>
    <div class="users">
        <p class="phone">Hi~<span>18339228688</span></p>
        <p class="number">本月签到 <i>00</i>天</p>
        <p class="tiper">每月1日开启新签到周期</p>
    </div>
</div>
            <!-- 签到内容结束-->
            <div class="signBtn">
                <div class="btn_s">
                    <a  id="sign" >我要签到</a>

                </div>
                <p class="rules">
                    <span id="activeItem">活动规则</span>
                </p>


            </div>
            <!-- 签到按钮结束-->
        </section>
    </div>
    <div class="content">
        <div class="topaward">
            <h2>签到领奖</h2>
            <p>
              <span id="signNum"><img src="img/rightgray.png" alt=""/>今天激活<em id="prizeN">0</em>个奖励</span>
            </p>
        </div>
        <div class="listAll">
            <div class="line1"></div>
            <div class="line2"></div>
            <!--<div class="line3"></div>-->
            <ul class="list">
                <li>
                    <div class="day">
                    <span>3<i>天</i></span>
                    </div>
                    <div class="cont cont1 clearfix">
                        <div class="left">
                            <i>¥</i><i>5</i><i>奖励</i>
                        </div>
                        <div class="right">
                            <div class="sale">
                                <p>UU快购新用户专享</p>
                                    <span class="coupon">跑腿代金券1张</span>
                                <p>（仅限郑州)</p>
                            </div>
                            <div class="get get2" >
                                <button  id="geted">点击领取</button>
                            </div>
                        </div>
                    </div>
                </li>
                <!-- 领取代金券结束-->
                <li>
                    <div class="day">
                        <span>7<i>天</i></span>
                    </div>
                    <div class="cont cont2 clearfix" style="">
                        <div class="left">
                            <i></i>
                            <img src="img/img_shop.jpg" alt=""/>
                        </div>
                        <div class="right">
                            <div class="sale">
                                <h3 style="">海鲜石锅拌饭</h3>
                                <i class="one">¥12</i><i class="two">¥36</i>
                            </div>
                            <div class="get get2">
                                <button>立即领取</button>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="day">
                        <span>15<i>天</i></span>
                    </div>
                    <div class="cont cont2 clearfix" style="">
                        <div class="left">
                            <i></i>
                            <img src="img/img_shop.jpg" alt=""/>
                        </div>
                        <div class="right">
                            <div class="sale">
                                <h3 style="">海鲜石锅拌饭</h3>
                                <i class="one">¥12</i><i class="two">¥36</i>
                            </div>
                            <div class="get get2">
                                <button>立即领取</button>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--弹窗-遮罩层-->
    <div id="mask" style=""></div>
    <!--签到-->
    <div id="logIn" style="">
        <div class="suc" style="width:200px; height:auto;">
            <span id="close" class="img2">×</span>
            <img class="imgone" src="img/yeah.png" alt=""/>
            <div class="wrapIMG2">
                <img class="imgthree  img3" src="img/suc_write.png" alt=""/>
            </div>
            <!--<img class="img2" src="img/bg_popup.png" alt=""/>-->
        </div>
    </div>
    <!--活动规则-->
    <div class="contentAct" >
        <span class="closeAct"><img src="img/delete.png" alt=""/></span>
        <h1>活动规则</h1>
        <p> 活动规则活动规则 活动规则活动规则 活动规则活动规则 活动规则活动规则 活动规则活动规则 </p>
    </div>
</div>
<!--page ed-->

<script>
    $(function(){
        var count = 0,
                limitDay = [],
                limitNum = $('.day');

        //循环获取中奖天数
        for(var d=0;d<limitNum.length;d++){
            limitDay.push(parseInt(limitNum.eq(d).text()))   //设置中奖天数
        }

        //绑定--签到--点击事件
        $('#sign').on('tap',function(){

            $('#mask').show();
            $('#logIn').show();

            bindClick(this,"您已签到");            //修改签到状态

            count++;                                //记录签到次数

            if(count>31){count=0;}                  //判断大于本月最大天数清零

            $('.number').find('i').text(p(count)); //记录签到天数

            for(i=0;i<limitDay.length;i++){         //满足中奖天数
                if(count==limitDay[i]){
                    $('#signNum').css({border:'1px solid #ff8b03',color:'#ff8b03'})  //点亮领取资格
                            .find('img').attr('src','img/rightcolor.png');
                    $('#prizeN').text(1);

                    limitNum.eq(i).find('span').addClass('limday');                      //点亮领取奖项
                    limitNum.eq(i).next('.cont2').css('border-color','#ff8b03').find('.left i').css('border-color','#ff8b03');

                    if(i==1){$('.line2').show().css('height','3rem')} //满足第2个
                    if(i==2){$('.line2').css('height','8.5rem')}         //满足第3个

                    //绑定--领取--点击事件
                    $('.get').find('button').eq(i).on('tap',function (){
                        bindClick(this,"您已领取")
                    });
                }
            }
        });

        //点击方法
        function bindClick(e,t){
            $(e).css('background','#d5d5d5').text(t);
        }
        //补0方法
        function p(s) {
            return s < 10 ? '0' + s: s;
        }
    });
$("#close,#mask").on('tap',function(){
    $('#mask').hide();
    $('#logIn').hide();
});
    //弹窗活动规则开始
    $("#activeItem").click(function(){
        $("#mask").show();
        $(".contentAct").show();
        popup('.contentAct')
    })
    $(".closeAct").click(function(){
        $("#mask").hide()
        $(".contentAct").hide();
    })

    //可视窗口居中
    function popup(e){
        wh = window.innerHeight,//获取当前窗口高度
        ww = window.innerWidth,//获取当前窗口宽度
        ih = $(e).height(),//获取弹出层高度
        iw = $(e).width(),//获取弹出层宽度
        st=  $('body').scrollTop(),//获取滚动条距离顶部的高度
        iTop = (wh-ih)/2+st,
        iLeft = (ww-iw)/2,
        console.log(iTop,iLeft,st)
        $(e).css({"left": iLeft + "px","top":iTop + "px","display":"block"});//居中操作
    }
</script>
</body>
</html>
